<template>
	<view>
		<form @submit="onSubmit" >
			<view class="line">
				<view class="left">头像</view>
				<view class="right">
					<button class="btnAvatar" open-type="chooseAvatar" @chooseavatar="chooseavatar">
						<image class="avatar" :src="formData.avatar"></image>
					</button>
					<view class="arrow"></view>
				</view>
			</view>
			<view class="line">
				<view class="left">昵称</view>
				<view class="right">
					<input type="nickname"  name="nickname" v-model="formData.nickname" />
					<view class="arrow"></view>
				</view>
			</view>
			<view class="line">
				<view class="left">真实姓名</view>
				<view class="right">
					<input type="text" name="name" :value="formData.name" />
					<view class="arrow"></view>
				</view>
			</view>
			<view class="line">
				<view class="left">手机号码</view>
				<view class="right">
					<input type="text" name="mobile" :value="formData.mobile" />
					<view class="arrow"></view>
				</view>
			</view>
			<view class="btnLogin">
				<button type="primary" form-type="submit">立即保存</button>
			</view>
		</form>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				formData: {}
			};
		},
		onLoad() {
			this.initData()
		},
		methods: {
			// 获取数据方法
			async initData() {
				let res = await uni.$http.get('/user/profile')
				this.formData = res
			},
			// 微信获取头像回调
			chooseavatar(event) {
				// 1. 获取头像的临时图片路径为止
				console.log(event.detail.avatarUrl); // 头像地址
				// 2. 需要将头像的临时路径，上传到服务器！进行存储，生成永远的图片路径
				// uni.uploadFile() 实现将临时路径的图片资源上传到自己的服务器
				// uniApp中通过uni.uploadFile()来实现上传文件的！
				/*
				wx.uploadFile({
				  url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
				  filePath: event.detail.avatarUrl , // 临时路径
				  name: 'file',
				  formData: {
					'user': 'test'
				  },
				  success (res){
					// 获取到真实的存储在我们后端服务器上面的地址
					const data = res.data
					// 3. 上传成功，设置给图片进行显示
				  }
				})
				*/
				// 3. 上传成功，将服务器端的图片路径设置给图片的src进行显示  【我们这里没有上传接口，所以简单拿临时路径作为显示】
				this.formData.avatar = event.detail.avatarUrl
			},
			// 表单的提交事件
			async onSubmit(event){
				// console.log(event.detail.value);  // 表单数据！
				// 修改用户资料请求
				let res = await uni.$http.post('/user/update',{
					...event.detail.value,
					avatar:this.formData.avatar
				})
				// 更新vuex里用户信息
				this.$store.commit('user/setUserInfo',res)
				// 提示成功
				uni.showToast({
					title:'更新成功',
					icon:'success'
				})
			}
		},
	}
</script>
<style lang="scss">
	.line {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
		line-height: 88rpx;
		padding: 0 30rpx;
		align-items: center;

		.right {
			height: 80rpx;
			display: flex;
			align-items: center;
		}

		.arrow {
			border-top: 1px solid #aaa;
			border-right: 1px solid #aaa;
			width: 20rpx;
			height: 20rpx;
			transform: rotateZ(45deg);
		}

		input {
			text-align: right;
			width: 440rpx;
		}
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.btnAvatar {
		background-color: #fff;
		width: 100%;
		display: block;
		padding: 0;
		height: 80rpx;
		border: none;
		border-radius: 0;
	}

	.btnLogin {
		margin: 40rpx;
	}
</style>
